<template>
  <os-form-table border stripe :columns="columns" :data="data" title="xx" >
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="活动名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select v-model="form.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动时间">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
    </el-form>
  </os-form-table>
</template>
<script>
import OsFormTable from '../../components/OsFormTable.vue'
export default {
  components: { OsFormTable },
  data () {
    return {
      data: [],
      columns: [
        { type: 'selection', label: '序号' },
        {
          label: 'ID',
          prop: 'id',
          sortable: 'custom',
          children: [
            { label: '二级表头1', prop: 'p21' },
            { label: '二级表头2', prop: 'p22' }
          ]
        },
        { label: '权限字段', prop: 'p1' },
        { label: '默认隐藏', prop: 'p2' },
        {
          label: '名称',
          prop: 'name',
          filters: true,
          renderCell: (data) => {
            return <div>name: {data.cellValue}</div>
          }
        }
      ],
      form: {
        name: '',
        region: '',
        date1: '',
        rule: [
          {
            type: 'Input',
            title: '名称',
            field: 'abcCode'
          },
          { type: 'el-button', field: 'search', props: { type: 'primary' }, children: ['查询'], emit: ['click'] },
          { type: 'el-button', field: 'clear', props: { type: 'primary' }, children: ['清空'], emit: ['click'] }
        ]
      },
      btn: [
        { text: '弹窗', cb: this.dialog },
        {
          text: '新增',
          // loading: true,
          cb: (data) => {
            this.data.push({ id: Math.random(), name: Math.random() })
          }
        }
      ]
    }
  },
  mounted () {
    setTimeout(() => {
      this.data = Array.from({ length: 38 }, (v, k) => ({ id: k, name: 'name' + k }))
    }, 100)
  }
}
</script>
